const object = document.getElementById("object");
const iframe = document.getElementById("iframe");
const menuEl = document.querySelector(".menu");
let current = 0;
let menu = ["打字机", "放大镜", "歌词滚动", "鼠标动画", "星空"];
let permission = menu;

// 点击事件
function handleClick(el, index) {
  if (current == index) return;
  current = index;
  removeActive();
  el.classList.add("active");
  setLink(current);
}
function removeActive() {
  const btns = document.querySelectorAll(`.btn`);
  for (const btn of btns) {
    btn.classList.remove("active");
  }
}
// 设置链接对象
function setLink(index) {
  const link = `${PATH}/${menu[index]}/index.html`;
  object.data = link;
  iframe.src = link;
}
// 请求数据
async function getData() {
  const { data } = await axios.get("/public/data.json").catch((error) => {
    console.error("Failed to load JSON file:", error);
  });
  console.log("data", data);
  menu = data.menu;
  renderMenu();
}
// 权限检测
function checkPermission(id) {
  if (!id) return;
  permission = menu.filter((item, index) => index == id - 1);
  setLink(id - 1);
}
// 渲染菜单
function renderMenu() {
  console.log("menu", menu);
  menuEl.innerHTML = menu
    .map(
      (item, index) =>
        `<div class="btn ${
          index == 0 ? "active" : ""
        }" onclick="handleClick(this,${index})">${item}</div>`
    )
    .join("");
}
// 解析url参数
function getParam(param) {
  const queryString = window.location.search;
  // 解析查询参数字符串
  const params = new URLSearchParams(queryString);
  // 在控制台中输出参数值
  return params.get(param);
}

window.onload = () => {
  getData();
  checkPermission(getParam("id"));
};
